<template>
  <mu-container class="containers">
    <mu-form ref="form" :model="form" class="mu-form">
      <mu-form-item label="延期原因" prop="applydetail" :rules="usernameRules">
        <mu-text-field v-model="form.applydetail">
        </mu-text-field>
      </mu-form-item>
      <mu-form-item label="开标时间" prop="applydetail" :rules="dateRules">
        <mu-date-input v-model="form.kbtime" container="bottomSheet" no-display label-float full-width></mu-date-input>
      </mu-form-item>
      <mu-form-item label="附件" prop="applydetail" :rules="usernameRules">
        <div style="position:relative">
          <mu-button small class="mu-buttons" data-mu-loading-size="22" color="primary" style="width:30%">本地上传
          </mu-button>
          <input id="uploaderInput" class="uploader__linput" type="file" accept="" capture="" style=""
            @change="fileInput_change($event)">
          <a href="#">{{filename}}.{{filetype}}</a>
          <div>
            提示：请上传对应补遗文件，格式要求：.png,.jpg,.pdf为后缀的文件。
          </div>
        </div>
      </mu-form-item>
      <mu-form-item>
        <mu-button color="primary" @click="submit" style="    margin: 0 auto;">保存</mu-button>
      </mu-form-item>
    </mu-form>
    <br />
  </mu-container>
</template>

<script>
  export default {
    data() {
      return {
        usernameRules: [{
          validate: (val) => !!val,
          message: '必须填写延期原因'
        }],
        dateRules: [{
          validate: (val) => !!val,
          message: '必须填写开标时间'
        }],
        form: {},
        filename: "",
        filetype: ''
      }
    },
    methods: {
      submit() {
        let _this = this;
        this.$refs.form.validate().then((result) => {
          if (result) {
            _this.form.kbtime = _this.timestampToTime(_this.form.kbtime).split('T')[0]
            _this.form.ordercode = this.$route.query.rowguid;
            _this.$api.applydelay(_this.form).then(function (data) {
              if (data.code) {

              } else {
                _this.$toast.success('申请成功');
                setTimeout(function () {
                  _this.$router.push('/order')
                }, 1000)
              }
            })
          }
        });
      },
      fileInput_change: function (e) {
        let _this = this;
        let formFile = new FormData();
        const loading = this.$loading();
        formFile.append("userFile", $(e.target)[0].files[0]);
        formFile.append("fileguid", _this.form.fileguid || '');

        formFile.append("multifile", '0');
        $.ajax({
          type: "post",
          url: "/bhtong/filesystem/uploadfile.json",
          data: formFile,
          processData: false,
          contentType: false,
          success: function (data) {
            let res = data;
            loading.close();
            if (res.code === 'v') {
              _this.filename = res.tdata[0].fileoldname;
              _this.filetype = res.tdata[0].filetype;

            } else {
              loading.close();
              _this.$toast.fail(res.msg)
            }
          }
        })

      },
      timestampToTime: function (timestamp) {
        let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) +
          '-';
        let D = date.getDate();
        if (D <= 9) {
          D = '0' + D
        }
        return Y + M + D;
      },
    },
    mounted() {
      let _this = this;
      this.$api.getfileguid().then(function (data) {
        _this.form.fileguid = data.fileguid;
      })
    }
  }
</script>

<style lang="less">
  .containers {
    padding: 15px;
  }

  .mu-buttons {
    margin: 0 auto;
    width: 100%;
    background-color: #ffffff;
    color: #333333;
    box-shadow: none;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
  }

  .uploader__linput {
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    opacity: 0;
    z-index: 99;
  }
</style>